<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/view/include/taglib.jsp"%>
<html lang="cn" class="app">
<head>
    <title>后台管理 - 人员表</title>
    <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="icon" type="image/png" href="icon.png">
    <link rel="apple-touch-icon-precomposed" href="icon.png">
    <link rel="stylesheet" href="${ctxStatic}/js/jPlayer/jplayer.flat.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/animate.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/simple-line-icons.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/font.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/css/app.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/js/ztree/css/zTreeStyle.css" />
    <link rel="stylesheet" href="${ctxStatic}/js/chosen/chosen.css" type="text/css" />
    <link rel="stylesheet" href="${ctxStatic}/js/layui/css/layui.css">

    <!--[if lt IE 9]>
    <script src="${ctxStatic}/js/ie/html5shiv.js"></script>
    <script src="${ctxStatic}/js/ie/respond.min.js"></script>
    <script src="${ctxStatic}/js/ie/excanvas.js"></script>
    <![endif]-->

</head>

<body>
<section class="scrollable wrapper">
    <div class="row">
        <div class="col-lg-12">
            <!-- 引导开始 -->
            <ul class="breadcrumb">
                <li><a href="${ctx}/welcome"><i class="fa fa-home"></i> 主页</a></li>
                <li>系统设置</li>
                <li class="active">用户管理</li>
                <li class="active">用户新增</li>
            </ul>
            <!-- 引导结束 -->
        </div>
    </div>
    <form id="userForm" class="bs-example form-horizontal" method="post"  >
        <%--<input type="hidden" name="id" value="${user.id}"/>--%>
        <%--基本信息-用户信息--%>
        <section class="panel panel-default">
            <header class="panel-heading font-bold">账户信息</header>
            <div class="panel-body">
                <%--<div class="col-lg-2 col-md-2 col-sm-2">--%>
                    <%--<div id="test2" lass="text-center m-b m-t" style="text-align: center;">--%>
                        <%--<a href="#" class="thumb-lg">--%>
                            <%--<img src="${ctxStatic}/images/a0.png" class="img-circle">--%>
                        <%--</a>--%>
                        <%--<div>--%>
                            <%--&lt;%&ndash;<div class="h3 m-t-xs m-b-xs">${user.name}</div>&ndash;%&gt;--%>
                                <%--<div class="h3 m-t-xs m-b-xs"  style="text-align: center;"><a href="javascript:alert('敬请期待');" class="btn btn-sm btn-info">更换头像照片</a></div>--%>
                            <%--&lt;%&ndash;<small class="text-muted">&ndash;%&gt;--%>
                            <%--&lt;%&ndash;</small>&ndash;%&gt;--%>
                        <%--</div>--%>
                    <%--</div>--%>
                <%--</div>--%>
                <%--<div class="col-lg-12 col-md-12 col-sm-12">--%>
                    <%--&lt;%&ndash;基本信息&ndash;%&gt;--%>
                    <%--<section class="panel panel-default">--%>
                        <%--<header class="panel-heading font-bold">基础信息</header>--%>
                        <%--<div class="panel-body">--%>
                            <div class="form-group">
                                <label class="col-lg-2 col-md-2 col-sm-2 control-label"><span class="text-danger">*</span>用户名：</label>
                                <div class="col-lg-4 col-md-4 col-sm-4">
                                    <input type="text" id="username" name="username" class="form-control" value="${user.username}">
                                </div>
                                <label class="col-lg-2 col-md-2 col-sm-2 control-label">密码：</label>
                                <div class="col-lg-4 col-md-4 col-sm-4">
                                    <input type="text" id="password" name="password" class="form-control" value="123456">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-2 col-md-2 col-sm-2 control-label"><span class="text-danger">*</span>姓名：</label>
                                <div class="col-lg-4 col-md-4 col-sm-4">
                                    <input type="text" id="name" class="form-control" name="name" placeholder="姓名" value="${user.name}" required />
                                </div>
                                <label class="col-lg-2 col-md-2 col-sm-2 control-label"><span class="text-danger">*</span>性别：</label>
                                <div class="col-lg-4 col-md-4 col-sm-4">
                                    <select id="sexCd" name="sexCd" class="chosen-select form-control" >
                                        <option value="">请选择性别</option>
                                        <c:forEach items="${dict:getDictList('DIM_SEX')}" var="dict">
                                            <option value="${dict.value}" <c:if test="${dict.value==user.sexCd}">selected</c:if> >${dict.label}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-2 col-md-2 col-sm-2 control-label"><span class="text-danger">*</span>单位：</label>
                                <div class="col-lg-4 col-md-4 col-sm-4 ">
                                    <input type="hidden" class="form-control" name="orgId" id="orgId" minlength="1" value="${user.orgId}" readonly>
                                    <input type="text" class="form-control" id="orgNm" value="${user.orgNm}" readonly>
                                </div>
                                <div class="col-lg-4 col-md-4 col-sm-4 ">
                                    <button id="menuBtn" type="button" class="btn btn-s-md btn-default">选择</button>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-2 col-md-2 col-sm-2 control-label"><span class="text-danger">*</span>角色：</label>
                                <div class="col-lg-4 col-md-4 col-sm-4 ">
                                    <select id="roleIdsStr" name="roleIdsStr" style="width:100%;margin-top:5px;height: 34px" class="chosen-select" data-placeholder="请选择角色"  multiple="multiple">
                                        <c:forEach items="${roleList}" var="item">
                                            <option value="${item.id}" <c:if test='${fn:contains(",".concat(user.roleIdsStr),item.id)}'> selected </c:if>>${item.name}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                                <label class="col-lg-2 col-md-2 col-sm-2 control-label"><span class="text-danger">*</span>是否冻结：</label>
                                <div class="col-lg-4 col-md-4 col-sm-4">
                                    <select id="locked" name="locked" style="width:100%;margin-top:5px;height: 34px" class="chosen-select" placeholder="请选择">
                                        <option value="0" <c:if test="${user.locked=='false'}">selected="selected"</c:if>>否</option>
                                        <option value="1" <c:if test="${user.locked=='true'}">selected="selected"</c:if> >是</option>
                                    </select>
                                </div>
                            </div>
                        <%--</div>--%>
                    <%--</section>--%>
                    <div class="form-group">
                        <div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-10 col-md-10 col-sm-10">
                            <button type="button" class="btn btn-s-md btn-info" onclick="savePerson()">保存</button>
                            <button type="button" class="btn btn-s-md btn-danger" onclick="closeModel(false)">关闭</button>
                        </div>
                    </div>
                <%--</div>--%>
            </div>
        </section>
    </form>

</section>

<div id="menuContent" class="menuContent" style="display:none;position: absolute;z-index: 10000;background-color: #eee;border: 1px solid #ccc;min-width:240px;">
    <style>.line{height:auto;}</style><%--这个不能删除--%>
    <ul id="tree" class="ztree" style="margin-top:0;"></ul>
</div>
</body>

<script src="${ctxStatic}/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="${ctxStatic}/js/bootstrap.js"></script>
<!-- App -->
<script src="${ctxStatic}/js/app.js"></script>
<script src="${ctxStatic}/js/slimscroll/jquery.slimscroll.min.js"></script>
<script src="${ctxStatic}/js/app.plugin.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/tools.js?version=${ctxVersion}"></script>
<script type="text/javascript" src="${ctxStatic}/js/layer/layer.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/tmpl/jquery.tmpl.js"></script>
<script src="${ctxStatic}/js/ztree/js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/chosen/chosen.jquery.min.js"></script>
<script type="text/javascript" src="${ctxStatic}/js/layui/layui.all.js"></script>
<script>
    $(function(){
        var msg = '${msg}';
        if(msg!=''){
            showMsg(msg);
        }

        $(".chosen-select").chosen();//初始化带搜索下拉框，自带初始化宽度显示非100%bug

        /**加载树*/
        var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback : {
                onClick : function(event, treeId, treeNode) {
                    //点击回调方法
                    ztreeOnClickCall && ztreeOnClickCall(treeNode);
                    $("#parentName").val(treeNode.name);
                    hideMenu();
                }
            }
        };
        var zNodes =[
            <c:forEach items="${organizationList}" var="o" varStatus="status">
            { id:"${o.id}", pId:"${o.parentId}", name:"${o.name}", open:${status.index == 0?1:0}}<c:if test="${!status.last}">,</c:if>
            </c:forEach>
        ];
        $(document).ready(function(){
            var ztree = $.fn.zTree.init($("#tree"), setting, zNodes);
//            ztree.expandAll(true);
        });

        $("#menuBtn").click(showMenu);
    })

    //ztree点击回调
    function ztreeOnClickCall(treeNode){
        $("#orgId").val(treeNode.id);
        $("#orgNm").val(treeNode.name);
    }
    //展示树选择区域
    function showMenu() {
        var cityObj = $("#orgId");
        var cityOffset = $("#orgNm").offset();
        $("#menuContent").css({
            left: cityOffset.left + "px",
            top: cityOffset.top + cityObj.outerHeight() + "px"
        }).slideDown("fast");

        $("body").bind("mousedown", onBodyDown);
    }
    //隐藏树选择区域
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    //点击其他区域事件-用于隐藏选择树
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
            hideMenu();
        }
    }

    /**保存人员信息 */
    function savePerson(){
        if(isBlankCheck("username,password,name,sexCd,locked,orgId,roleIdsStr","用户名,密码,姓名,性别,冻结,单位,角色")){
            var loadingLayer = layer.load(1, {shade: [0.1,'#fff']});//loading
            //根据项目标识获取目录
            $.ajax({
                type: 'post',
                url: '${ctx}/sys/user/insert.json?timeStamp='+new Date().getTime(),
                dataType:"json",
                data: $("#userForm").serialize(),
                success: function (data) {
                    layer.close(loadingLayer);
                    if(data.ret==1){
                        showMsg(data.desc,function(){
                            location.href = "${ctx}/sys/user/update?id="+data.data;
                        });
                    }else{
                        showMsg(data.desc);
                    }

                },error:function(){
                    layer.close(loadingLayer);
                    showMsg("点击过快或程序异常");
                }
            });
        }
    }


</script>
</html>
